/**
问答题目添加
 */
<template>
  <div class="app">
    <el-form :model="form" label-width="80px">
      <el-form-item label="题干">
        <el-input type="textarea" v-model="form.questionTxt" autosize></el-input>
      </el-form-item>
      <el-form-item label="参考答案">
        <editor id="tinymce1" v-model="form.tinyValue" :init="init"></editor>
      </el-form-item>
      <el-form-item label="分值">
      <el-input-number v-model="form.num"  :min="1" :max="5" size="mini"></el-input-number>
       </el-form-item>
       <el-form-item >
       <el-button size="small" round  @click="resetForm">重置</el-button>
       <el-button size="small" type="primary" round icon="el-icon-document-checked"  @click="submitForm">新增题目</el-button>
       </el-form-item>
    </el-form>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce"; //引入tinymce富文本插件
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/fullscreen"; //全屏插件
import "tinymce/plugins/preview"; //预览插件
import "tinymce/plugins/code"; //源代码插件
import "tinymce/plugins/wordcount"; //字数插件
import "tinymce/plugins/autoresize"; //高度自适应
import "tinymce/plugins/paste"; // 允许粘贴文本
export default {
  props: ["testPaperId", "radio"],
  components: {
    Editor
  },
  data() {
    return {
      form: {
        questionTxt: "",
        tinyValue: "",
        num: 5
      },
      init: {
        language_url: "/tinymce/zh_CN.js", // 语言包的路径
        language: "zh_CN", //语言
        skin_url: "/tinymce/skins/ui/oxide", // skin路径
        height: this.height, //编辑器高度
        branding: false, //是否禁用“Powered by TinyMCE”
        menubar: false, //顶部菜单栏显示
        selector: "textarea", //指定CSS选择器
        plugins:
          "lists image table wordcount fullscreen preview code wordcount autoresize paste", //插件
        autoresize_bottom_margin: 50, // 编辑器的底部外边距
        autoresize_max_height: 800, // 编辑区域的最大高
        autoresize_min_height: 350, // 编辑区域的最小高
        autoresize_on_init: true, //自适应高度
        paste_as_text: true, // 允许粘贴文本
        //工具栏
        toolbar:
          "undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table | removeformat | fullscreen | preview | code | wordcount",
        /* blobinfo参数是一个对象,包含上传文件的信息,success为成功函数,上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息 */
        images_upload_handler: (blobInfo, success, failure) => {
          //上传图片
          this.modifyingHead(blobInfo, success, failure);
        }
      }
    };
  },
  methods: {
    //上传图片
    modifyingHead(blobInfo, success, failure) {
      let that = this;
      let formdata = new FormData();
      formdata.set("upload_file", blobInfo.blob());
      // 请求接口
      that.axios
        .post("/api/Question/UploadImg", formdata)
        .then(res => {
          success(res.data.location);
        })
        .catch(error => {
          failure(error);
        });
    },
    // 提交
    submitForm() {
      let _this = this;
      console.log(79879)
      if (_this.form.questionTxt && _this.form.tinyValue) {
        console.log(_this.form.questionTxt, _this.form.tinyValue);
        _this.axios
          .post("/api/TestPaper/AddQuestionToTestPaper", {
            tpqPaperId: _this.testPaperId, //试卷主键编号
            tpqScore: _this.form.num, //小题分数
            tpqQuestion: {
              questionTitle: _this.form.questionTxt, //题目的标题
              questionTypeId: _this.radio, //题目的类型 1=选择题 2=填空题 3=问答题
              answerQuestion: {
                aqAnswer: _this.form.tinyValue ////问答题的答案
              }
            }
          }
        ).then((res)=>{
          console.log(res)
           if(res.data.code==1){
              this.resetForm()
               _this.$emit('upSelectTopic');
               _this.$message.success("添加成功");
           }
        }).catch((e)=>{
          console.log(e)
        })
      }else{
        _this.$message.warning("请填写完整信息");
      }
    },
    // 重置
    resetForm() {
      this.form.tinyValue='';
      this.form.questionTxt='';
    }
  },
  mounted() {
    tinymce.init({});
  }
};
</script>

<style  lang="less" scoped>
/deep/.el-form-item {
  margin-bottom: 14px;
}
</style>
